// 导入flex.scss样式
@import "../flex.css";
html, body { padding: 0; margin: 0; height: 100%; }
.w_1240 { max-width: 1240px; margin: 0 auto;}
.line1 {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
@mixin inputcolor($color1:#63758a,$color2:#b7c0cc) {
    & input, & textarea { color: $color1;}
    & input::-webkit-input-placeholder { color: $color2;}
    & input:-moz-placeholder { color: $color2;}
    & input::-moz-placeholder { color: $color2;}
    & input:-ms-input-placeholder { color: $color2;}
    & textarea::-webkit-input-placeholder { color: $color2;}
}
@mixin Easing($num) {transition: all $num+s ease-in-out;}
.container { box-sizing: border-box; padding: 140px 0 70px 0; background: url("../../../images/bg_01.png") no-repeat center center; background-size: cover; min-height: 100%;}
.quick_access_list1 { display: flex; justify-content: space-between; flex-wrap: wrap; background: rgba(255, 255, 255, 0.65); padding: 20px;
    border-radius: 6px; backdrop-filter: blur(6px); list-style-type: none; margin: 0;
    li { width: 32.16%; margin: 1.76% 1.76% 0 0; border-radius: 6px; backdrop-filter: blur(6px); height: 102px; padding: 20px 0 0 32px; box-sizing: border-box;
        &:nth-child(3n) { margin-right: 0;}
        &:nth-child(1), &:nth-child(2), &:nth-child(3) { margin-top: 0;}
        h3 { font-weight: 500; font-size: 28px; color: rgba(0, 0, 0, 0.85); margin: 0; line-height: 30px;}
        p { padding-top: 8px; font-weight: 400; font-size: 16px; color: rgba(0, 0, 0, 0.85); line-height: 24px; margin: 0;}
        &.quick_access_list1_01 { background: #CDDFFF;
            div { background: url("../../../images/tj_01.png") no-repeat right center; background-size: auto 100%;}
        }
        &.quick_access_list1_02 { background: #DFD7F2;
            div { background: url("../../../images/tj_02.png") no-repeat right center; background-size: auto 100%;}
        }
        &.quick_access_list1_03 { background: #CDDFFF;
            div { background: url("../../../images/tj_03.png") no-repeat right center; background-size: auto 100%;}
        }
        &.quick_access_list1_04 { background: #DFD7F2;
            div { background: url("../../../images/tj_04.png") no-repeat right center; background-size: auto 100%;}
        }
        &.quick_access_list1_05 { background: #CEEFE8;
            div { background: url("../../../images/tj_05.png") no-repeat right center; background-size: auto 100%;}
        }
        &.quick_access_list1_06 { background: #F6DDC6;
            div { background: url("../../../images/tj_06.png") no-repeat right center; background-size: auto 100%;}
        }
    }
}
.btn_group { display: flex; justify-content: space-between; padding: 20px 0;
    .btn_group_left { display: flex;
        .btn_group_left_btn { height: 30px; line-height: 30px; border: 1px solid transparent; margin-right: 8px; padding: 0 16px;
            background: #F6F9FF; box-shadow: 0 0 6px -4px rgba(0, 0, 0, 0.12); border-radius: 6px; backdrop-filter: blur(6px);
            text-decoration: none; font-weight: 500; font-size: 16px; color: rgba(0, 0, 0, 0.65);
            &.active { background: #4E6CF4; color: #fff;
                box-shadow: 0px 0px 1px 0px rgba(0, 27, 102, 0.08), 0px 1px 4px -1px rgba(0, 42, 140, 0.08), 0px 2px 8px -2px rgba(0, 27, 102, 0.08);
            }
        }
        .btn_group_left_name {height: 30px; line-height: 30px; font-weight: 400; font-size: 14px; color: #000000; padding: 0 8px 0 30px;}
        .btn_group_left_date_range{ display: flex; align-items: center; background: #F7F9FE; box-shadow: 0px 0px 6px -4px rgba(0,0,0,0.12); border-radius: 6px; backdrop-filter: blur(9px);
            height: 32px; box-sizing: border-box; padding: 0 10px;
            .layui-input-inline{ width: 100px;
                input{ border: none; background: none; font-weight: 400; font-size: 14px; color: rgba(0,0,0,0.85);outline: none;width: 100%;}
            }
            .date_c{ height: 20px; width: 16px; background: url("../../../images/time_icon_1.png") no-repeat center; background-size: 16px; margin-left: 12px;}
            .date_z{ height: 20px; width: 26px; background: url("../../../images/time_icon_2.png") no-repeat center; background-size: 16px;}
        }
    }
    .btn_group_right_btn { height: 30px; line-height: 30px; background: #FFFFFF; display: inline-block;
        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.02); border-radius: 6px; border: 1px solid #D9D9D9;
        font-weight: 400; font-size: 14px; color: rgba(0, 0, 0, 0.85); text-decoration: none;
        padding: 0 16px;
        &:hover { color: #4E6CF4; border-color: #4E6CF4;}
    }
}
.echarts_group { display: flex; justify-content: space-between;
    > main { background: rgba(255, 255, 255, 0.65); border-radius: 6px; backdrop-filter: blur(6px);
        width: 49.18%; box-sizing: border-box; padding: 20px;
        > h2 { margin: 0 0 20px 0; font-weight: 500; font-size: 20px; color: rgba(0, 0, 0, 0.85); line-height: 28px;}
        > div { height: 245px; width: 100%; margin-bottom: 20px;
            &:last-child { margin-bottom: 0;}
        }
    }
}
.echarts_box_bar { height: 367px; box-sizing: border-box; padding: 20px; margin-top: 60px;
    background: rgba(255, 255, 255, 0.65); border-radius: 6px; backdrop-filter: blur(6px);
    #echarts_box_7 { height: 100%; width: 100%;}
}
